<template>
  <div class="data-directory-container">
    <div class="left">
      <div class="title">
        <i class="line"></i>
        <p class="text">查询条件</p>
      </div>
      <div class="leftContent">
        <el-tree :data="treeData" highlight-current :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </div>
    <div class="center">
      <div class="center-tj">
      <div class="title">
        <i class="line"></i>
        <p class="text">数据资源统计</p>
      </div>
      <div class="right-box">
        <!-- <div class="box" v-for="item,index in rightDataBox" :key="index">
          <p class="text" v-for="items,indexs in item" :key="indexs">{{items.text1}}&nbsp;&nbsp;&nbsp;10{{items.unit}}</p>
        </div> -->
        <div :id="'echarts'+index" class="box" v-for="item,index in  echartsData" :key="index"></div>
      </div>
    </div>
      <div class="top">
        <div class="title">
          <i class="line"></i>
          <p class="text">目录信息</p>
        </div>
        <div class="form">
          <el-form ref="form" :model="form" :inline="true" label-width="100px">
            <el-form-item label="目录名称：">
              <el-input size="small" v-model="form.catalogName" disabled></el-input>
            </el-form-item>
            <el-form-item label="目录级别：">
              <el-input size="small" v-model="form.levelName" disabled></el-input>
            </el-form-item>
            <el-form-item label="上级目录：">
              <el-input size="small" v-model="form.parentCatalogName" disabled></el-input>
            </el-form-item>
            <el-form-item>
            <el-button size="small" type="success" icon="el-icon-plus" @click="addDataDirectory" v-hasPermi="['resource:catalog:add']">新增目录</el-button>
            <el-button size="small" type="primary"  @click="biaoji" v-hasPermi="['resource:mark:add']">标记目录</el-button>
            <el-button size="small" type="danger"  @click="removeBiaoji" v-hasPermi="['resource:mark:remove']">删除标记</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bto">
        <div class="top">
          <div class="title">
            <i class="line"></i>
            <p class="text">目录内容</p>
          </div>
        </div>
        <!-- :max-height="300" -->
        <div class="table" ref="table">
          <el-table

          height="100%"
          :header-cell-style="{textAlign: 'center',color: '#fff',backgroundColor: '#223450'}"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="80">
            </el-table-column>
            <el-table-column
              prop="catalogName"
              align="center"
              show-overflow-tooltip
              label="下级目录名称">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="150">
              <template slot-scope="{ row, $index }">
                <el-button type="text" v-if="$index !== 0" style="color:rgb(60, 110, 240);padding:0" @click="moveUp(row, $index)" v-hasPermi="['resource:catalog:move']">上移</el-button>
                <el-button type="text" v-if="$index !== tableData.length - 1" style="color:rgb(60, 110, 240);padding:0" @click="moveDown(row, $index)" v-hasPermi="['resource:catalog:move']">下移</el-button>
                <el-button type="text" style="color:rgb(227, 50, 50);padding:0" @click="remove(row)" v-hasPermi="['resource:catalog:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div> -->
      </div>

      <el-dialog
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        :close-on-click-modal	="false"
        title="标记目录资源"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="是否为空间数据:" prop="isGeom">
            <el-radio-group v-model="ruleForm.isGeom" class="ml-4">
              <el-radio label="1" size="small">是</el-radio>
              <el-radio label="2" size="small">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="空间数据类型:" prop="geomType" v-if="ruleForm.isGeom&&ruleForm.isGeom === '1'">
            <el-select v-model="ruleForm.geomType" placeholder="请选择空间数据类型" size="small" style="width: 100%;">
              <el-option
                v-for="item in geomTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图标颜色:" prop="color" v-if="ruleForm.isGeom&&ruleForm.isGeom === '1'">
            <el-color-picker v-model="ruleForm.color" />
          </el-form-item>
          <el-form-item label="图标路径:" prop="icon" v-if="ruleForm.isGeom&&ruleForm.isGeom === '1'">
            <el-input v-model="ruleForm.icon" size="small"/>
          </el-form-item>
          <el-form-item label="是否为救援信息:" prop="isRc" v-if="ruleForm.isGeom&&ruleForm.isGeom === '1'">
            <el-radio-group v-model="ruleForm.isRc" class="ml-4">
              <el-radio label="1" size="small">是</el-radio>
              <el-radio label="2" size="small">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否为灾害隐患点:" prop="isDr" v-if="ruleForm.isGeom&&ruleForm.isGeom === '1'">
            <el-radio-group v-model="ruleForm.isDr" class="ml-4">
              <el-radio label="1" size="small">是</el-radio>
              <el-radio label="2" size="small">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="资源类型:" prop="resourceType">
            <el-select v-model="ruleForm.resourceType" placeholder="请选择资源类型" size="small" style="width: 100%;">
              <el-option
                v-for="item in resourceTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose" size="small">取消</el-button>
            <el-button type="primary" @click="saveDialogVisible" size="small">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <dataDirectoryDialog v-if="dialog.dataDirectoryVisible" :dialog="dialog" :treeData="treeData" @colseDataDirectory="colseDataDirectory"/>
  </div>
</template>

<script>
import dataDirectoryDialog from './dataDirectoryDialog.vue'
import * as API from '../../api/resourceManagement/index.js'
export default {
  components: { dataDirectoryDialog },
  data() {
    return {
      echartsData: [],
      flag: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      multipleSelection: [],
      maxHeight: null,
      dialog: {
        dataDirectoryVisible: false
      },
      rightDataBox: [
        [{
          text1: '灾害隐患点',
          unit: '处'
        },
        {
          text1: '地质灾害隐患点',
          unit: '处'
        },
        {
          text1: '山洪灾害隐患点',
          unit: '处'
        }],
        [{
          text1: '救援队伍',
          unit: '处'
        },
        {
          text1: '政府救援队伍',
          unit: '处'
        },
        {
          text1: '企业救援队伍',
          unit: '处'
        }],
        [{
          text1: '救灾物资',
          unit: '处'
        },
        {
          text1: '政府救灾物资',
          unit: '处'
        },
        {
          text1: '企业救灾物资',
          unit: '处'
        }],
        [{
          text1: '应急避难场所',
          unit: '处'
        },
        {
          text1: '大型应急避难场所',
          unit: '处'
        },
        {
          text1: '中型应急避难场所',
          unit: '处'
        },
        {
          text1: '小型应急避难场所',
          unit: '处'
        }]
      ],

      geomTypeList: [
        {
          id: 1,
          label: '点数据'
        },
        {
          id: 2,
          label: '线数据'
        },
        {
          id: 3,
          label: '面数据'
        }
      ],
      resourceTypeList: [
        {
          id: 1,
          label: '表数据'
        },
        {
          id: 2,
          label: '文档数据'
        }
      ],
      treeId: null,
      dialogVisible: false,
      ruleForm: {
        isDr: '2',
        isRc: '2'
      },
      nodeClick: {}
    }
  },
  watch: {
    maxHeight: {
      handler(newV) {
        this.maxHeight = newV
      },
      deep: true
    }
  },

  mounted() {
    this.getMaxTableHeight()
    this.getTreeData()
  },
  methods: {
    async biaoji() {
      await this.getManagementIsMarkCatalog()
      if (this.flag) {
        this.$message.warning('此标记目录资源已存在')
        return false
      } else {
        this.dialogVisible = true
      }
    },
    handleClose() {
      this.ruleForm = {}
      this.$refs.ruleForm.resetFields()
      this.dialogVisible = false
    },
    // 是否存在
    async getManagementIsMarkCatalog() {
      const params = {
        catalogId: this.form.id
      }
      await API.managementIsMarkCatalog(params).then(res => {
        if (res.code === 200) {
          this.flag = res.data
        }
      })
    },
    saveDialogVisible() {
      let isGeom
      let isRc
      if (this.ruleForm.isGeom === '1') {
        isGeom = true
      } else {
        isGeom = false
      }
      if (this.ruleForm.isRc === '1') {
        isRc = true
      } else {
        isRc = false
      }
      if (this.ruleForm.isDr === '1') {
        isRc = true
      } else {
        isRc = false
      }
      const data = {
        isGeom,
        isRc,
        geomType: this.ruleForm.geomType,
        resourceType: this.ruleForm.resourceType,
        id: this.form.id,
        color: this.ruleForm.color,
        icon: this.ruleForm.icon
      }
      API.managementMarkCatalog(data).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getTreeData()
          this.handleClose()
        }
      })
    },
    // 删除目录标记资源
    async removeBiaoji() {
      await this.getManagementIsMarkCatalog()
      if (!this.flag) {
        this.$message.warning('未存在标记目录资源')
        return false
      }
      const params = {
        catalogId: this.form.id
      }
      API.removeMarkCatalog(params).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getTreeData()
        }
      })
    },

    // 删除
    remove(row) {
      const data = { ids: row.id.toString() }
      API.removeCatalog(data).then(res => {
        if (res.code === 200) {
          this.getTreeData()
        }
      })
    },
    // 获取树
    getTreeData() {
      API.managementCatalogTree().then(res => {
        if (res.code === 200) {
          this.treeData = res.data
          this.getTableData(res.data[0])
          this.getManagementGetCatalog(res.data[0])
          this.getMapCountByParent(res.data[0])
        }
      })
    },
    getMaxTableHeight() {
      const windowInnerHeight = this.$refs.table
      this.maxHeight = windowInnerHeight.offsetHeight
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 树节点点击事件
    handleNodeClick(data) {
      this.nodeClick = data
      this.getMapCountByParent(data)
      this.getTableData(data)
      this.getManagementGetCatalog(data)
    },
    getMapCountByParent() {
      API.mapCountByParent().then(res => {
        if (res.code === 200) {
          this.echartsData = res.data

          this.$nextTick(() => {
            this.getEcharts1()
          })
        }
      })
    },
    getManagementGetCatalog(data) {
      const params = {
        id: data.id
      }
      API.managementGetCatalog(params).then(res => {
        if (res.code === 200) {
          this.form = res.data
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection, 'this.multipleSelection')
    },
    getTableData(data) {
      console.log(data, '==')
      let params = {}
      if (data) {
        params = {
          parentId: data.id
        }
      }
      API.managementListCatalogs(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
        }
      })
    },
    // 上移
    moveUp(row, index) {
      console.log(row, this.tableData, this.tableData[index - 1], 'row, this.tableData[index - 1]')
      this.getManagementMoveCatalog(row, this.tableData[index - 1])
      this.swapItems(this.tableData, index, index - 1)
    },
    // 下移
    moveDown(row, index) {
      this.getManagementMoveCatalog(row, this.tableData[index + 1])
      this.swapItems(this.tableData, index, index + 1)
    },
    getManagementMoveCatalog(row, data) {
      const id1 = row.id
      const sort1 = row.sort
      const id2 = data.id
      const sort2 = data.sort
      const params =
      [
        {
          'id': id1,
          'sort': sort2
        },
        {
          'id': id2,
          'sort': sort1
        }
      ]
      API.managementMoveCatalog(params).then(res => {
        if (res.code === 200) {
          // this.getTreeData()
          this.getTableData(this.nodeClick)
        }
      })
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
    },
    // 新增目录
    addDataDirectory() {
      this.dialog.dataDirectoryVisible = true
    },
    colseDataDirectory() {
      this.dialog.dataDirectoryVisible = false
      this.getTreeData()
    },
    getEcharts1() {
      let myEcharts
      for (let index = 0; index < this.echartsData.length; index++) {
        myEcharts = this.$echarts.init(document.getElementById(`echarts${index}`))
        console.log(myEcharts, 'myEcharts')
        myEcharts.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            textStyle: {
              color: '#FFFFFF'
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['50%', '45%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter: `{d|${this.echartsData[index].supName}}\n{b|${this.echartsData[index].supTotal}}`,
                  rich: {
                    b: {
                      color: '#fff',
                      fontSize: 16
                    },
                    d: {
                      color: '#fff',
                      fontSize: 14,
                      lineHeight: 20
                    }
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: this.echartsData[index].subMap
            }
          ]
        })
        window.addEventListener('resize', () => {
          myEcharts.resize()
        })
      }
    },
    getEcharts2() {
      const myEcharts = this.$echarts.init(document.getElementById('echarts2'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{a|救援队伍}\n{b|200}',
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: 14,
                    lineHeight: 20
                  },
                  b: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '政府救援队伍' },
              { value: 1048, name: '企业救援队伍' }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    },
    getEcharts3() {
      const myEcharts = this.$echarts.init(document.getElementById('echarts3'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{d|救灾物资}\n{b|300}',
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 16
                  },
                  d: {
                    color: '#fff',
                    fontSize: 14,
                    lineHeight: 20
                  }
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '政府救援物资' },
              { value: 1048, name: '企业救援物资' }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    },
    getEcharts4() {
      const myEcharts = this.$echarts.init(document.getElementById('echarts4'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{d|应急避难场所}\n{b|300}',
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 16
                  },
                  d: {
                    color: '#fff',
                    fontSize: 14,
                    lineHeight: 20
                  }
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '大型' },
              { value: 1048, name: '中型' },
              { value: 1048, name: '小型' }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.data-directory-container{
  display:flex;
  padding:10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  .left,.center,.right{
    height: calc(100% - 20px);
    padding: 10px;
    background:rgba(3, 27, 54, 0.7);
    .title{
      display: flex;
      align-items: center;
      height: 30px;
      .line{
        width: 5px;
        height: 25px;
        background: #409EFF;
        margin-right: 5px;
      }
      .text{
        color: #fff;
      }
    }
  }
  .left{
    width: 15%;
    margin-right: 10px;
    .leftContent{
      margin-top: 5px;
      height: calc(100% - 35px);
    }
  }
  .center{
    flex: 1;
    margin-right: 10px;
    .center-tj{
      height: 1.82rem;
      .right-box{
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        .box{
          width: 25%;
          height: 150px;
          background: linear-gradient(270deg, #245092 0%, #1D3664 43%, #16203D 100%);
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          border: 1px solid rgba(255,255,255,0.1);
          margin-right: 10px;
        }
      }

    }
    .top{
      height: 1rem;
      .form{
        height: calc(100% - 30px);
        width: 100%;
        :deep(.el-form){
          width: 100%;
          margin-top: 20px;
          .el-form-item{
            margin-bottom:0
          }
        }
      }
    }
    .bto{
      height: calc(100% - 2.82rem);
      .top{
        display: flex;
        height: 30px;
        justify-content: space-between;
        align-items: center;
        .top-btn{
          height: 30px;
          :deep(.el-button){
            height: 30px;
          }
        }
      }
      .table{
        width: 100%;
        margin-top: 10px;
        height: calc(100% - 75px);
      }
      .pagination{
        height: 35px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
  .right{

    .right-box{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      margin-top: 10px;
      height: calc(100% - 40px);
      align-content: flex-start;
      .box{
        padding: 10px 0;
        text-indent: 1em;
        width: 46%;
        height: 150px;
        background: #eee;
        border-radius: 10px;
        margin-bottom: 10px;
        &:nth-child(odd){
          margin-right: 10px;
        }
        .text{
          font-size: 16px;
          line-height: 35px;
        }
      }
    }
  }
}
/*最外层透明*/
:deep(.el-table), :deep(.el-table__expanded-cell){
  background-color: rgba(51, 91, 127, 0.6);
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #C9E9FF;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7EC1FF;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover){
   background-color: transparent;
}
:deep(.el-table .warning-row) {
 background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table){
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;

}
:deep(.el-table tbody tr:hover > td) {
            background: rgba(51, 91, 127, 0.4) !important;
        }
   :deep(.el-input__inner){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pager li){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.btn-prev){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.el-pagination button:disabled){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pagination__total),:deep(.el-pagination__jump){
  color: #fff;
}
:deep(.el-table td.el-table__cell),:deep(.el-table th.el-table__cell.is-leaf){
  border-color: rgba(231,234,241,0.2);
}
:deep(.el-table::before){
  background: rgba(231,234,241,0.2);
}
:deep(.el-form-item__label){
  color: #A3B3BE;
}
:deep(.el-tree-node__label){
  color: #fff;
}
:deep(.el-tree){
  background: rgba(3, 27, 54, 0.7);
}
:deep(.el-tree-node__content:hover) {
    background-color: #65a19f !important;
}
:deep.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background: #65a19f !important;
}
:deep(.el-tree--highlight-current){
  .el-tree-node__children{
    .el-tree-node.is-current{
      .el-tree-node__content{
        background: #65a19f !important;
      }
    }
  }
}
:deep(.el-tree-node:focus>.el-tree-node__content){
    background: #65a19f !important;
}
:deep(.el-dialog){
  background: rgba(0,28,55,0.85);
}
:deep(.el-dialog__header){
  border-bottom: 1px solid rgba(120, 189, 255, 1);
  margin-right: 0px;
  margin-bottom:10px
}
:deep(.el-dialog__title){
  color: #41B0FF;
  font-size: 16px;
}

:deep(.el-dialog__headerbtn .el-dialog__close){
  color: rgba(70, 174, 255, 1);
}
</style>
